<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Spring应用内嵌arthas测试</title>
    <link href="./index.css" rel="stylesheet" type="text/css">

    <script src="./vue.js" type="text/javascript"></script>
    <script src="./index.js" type="text/javascript"></script>
    <script src="./axios.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            width: 90%;
            margin: auto;
        }

    </style>
</head>
<body>
<div id="layout1" v-loading="loading" style="width: 100%">
    <div>
        <el-form :inline="true" label-width="120px" size="mini">
            <el-form-item label="热部署：">
                <el-upload
                        class="upload-demo"
                        drag
                        action=""
                        :http-request="classHotswap"
                        accept=".class"
                        :show-file-list="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将class文件拖到此处进行热部署，或<em>点击上传</em></div>
                </el-upload>
            </el-form-item>
            <br/>
            <el-form-item label="反编译：">
                <el-button @click="decompiler">执行</el-button>
                <el-input v-model="classPattern" style="width: 500px"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="ognl表达式：">
                <el-button @click="execOgnl" style="vertical-align: top">执行</el-button>
                <el-input type="textarea" rows="8" v-model="ognl" style="width: 880px"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="Jvm：">
                <el-button @click="exec('jvm')" style="vertical-align: top">执行</el-button>
            </el-form-item>
            <el-form-item label="logger：">
                <el-button @click="execLogger" style="vertical-align: top">执行</el-button>
                <el-input v-model="name" style="width: 100px"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog title="结果" :visible.sync="dialogVisible" :fullscreen="true" :show-close="false">
        <div style="max-height: 480px;overflow-y: auto">
            <pre>{{resData}}</pre>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" @click="closeDialog">确定</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript">
    initVue();

    function initVue() {
        return new Vue({
            el: '#layout1',
            data() {
                return {
                    loading: false,
                    url: 'http://localhost:8898',
                    classPattern: 'org.javamaster.spring.embed.arthas.service.impl.UserServiceImpl',
                    ognl: '#req1=new org.javamaster.spring.embed.arthas.model.CreateUserReqVo(),\n' +
                        '#req1.username="jufeng98",\n' +
                        '#req1.password="123456",\n' +
                        '#res1=@org.javamaster.spring.embed.arthas.utils.SpringContextUtils@getBean("userServiceImpl").createUser(#req1),\n' +
                        '#res2=@com.alibaba.fastjson.JSON@toJSONString(#res1,true),\n' +
                        '{#res2}',
                    name: 'ROOT',
                    level: '',
                    resData: '',
                    dialogVisible: false,
                }
            },
            methods: {
                decompiler() {
                    that.loading = true;
                    axios.post(this.url + '/appTest/jad?classPattern=' + encodeURIComponent(this.classPattern))
                        .then(res => {
                            that.loading = false;
                            that.resData = res.data;
                            that.dialogVisible = true;
                        });
                },
                execOgnl() {
                    that.loading = true;
                    axios.post(this.url + '/appTest/ognl?ognl=' + encodeURIComponent(this.ognl))
                        .then(res => {
                            that.loading = false;
                            that.resData = res.data;
                            that.dialogVisible = true;
                        });
                },
                execLogger() {
                    that.loading = true;
                    axios.post(this.url + '/appTest/logger?testPsw=LHtSW4Kk', {
                        "name": this.name,
                        "level": this.level
                    })
                        .then(res => {
                            that.loading = false;
                            that.resData = res.data;
                            that.dialogVisible = true;
                        });
                },
                exec(command) {
                    that.loading = true;
                    axios.post(this.url + '/appTest/' + command + '?ognl=' + encodeURIComponent(this.ognl))
                        .then(res => {
                            that.loading = false;
                            that.resData = res.data;
                            that.dialogVisible = true;
                        });
                },
                classHotswap(fileObj) {
                    const reader = new FileReader();
                    that.loading = true;
                    reader.onload = function (loadedEvent) {
                        let base64 = loadedEvent.target.result;
                        axios.post(that.url + '/appTest/hotswap', {"base64": base64})
                            .then(res => {
                                that.loading = false;
                                that.$message({"type":"success","message":res.data});
                            });
                    };
                    // 读取为base64字符串
                    reader.readAsDataURL(fileObj.file);
                },
                closeDialog() {
                    this.dialogVisible = false
                }
            },
            mounted() {
                window.that = this;
            }
        });
    }
</script>
</body>
</html>